import 'babel-polyfill';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link } from '$router';
import HomePage from './home';
import App from './App';
import yoHistory from '../common/history';
import { Scroller, Touchable } from '$yo-component';


const ListPage = require.async('./list');
const DetailPage = require.async('./detail');
const MyPage = require.async('./my');
const SkillPage = require.async('./skill');
const ExperiencePage = require.async('./experience');
const ProductionPage = require.async('./production');
const NoMatch = require.async('./NoMatch');
const Root = () => (
    <div>    
    <Router history={yoHistory}>
    <Route path="/" component={App}>
            <IndexRoute  component={HomePage} />
            <Route path="list" getComponent={ListPage}  />
            <Route path="detail" getComponent={DetailPage} />    
            <Route path="skill" getComponent={SkillPage} />
            <Route path="experience" getComponent={ExperiencePage} />
            <Route path="production" getComponent={ProductionPage} />
            <Route path="my" getComponent={MyPage} />
            <Route path="*" getComponent={NoMatch}/>
        </Route>
    </Router>     
     </div>
);

ReactDOM.render(<Root />, document.getElementById('root'));
